<template>
  <div class='exam_result-container'>
    <navbar title="我的成绩">
      <template v-slot:bottom>
        <TiyanDialog :nav="true"></TiyanDialog>
      </template>
    </navbar>
    <view class="flex">
      <view class="btn" @click="toExam">
        <view class="flex-col left-container">
          <text class="title">模拟考试</text>
          <text class="sub-title">仿真模拟考试</text>
        </view>
        <view class="inner-btn center">
          <view class="img"/>
          <text class="title">开始考试</text>
        </view>
      </view>
      <view class="btn zhenshi" @click="gokaochang">
        <view class="flex-col left-container">
          <text class="title">真实考场</text>
          <text class="sub-title">高度还原正式考场</text>
        </view>
        <view class="inner-btn center">
          <view class="img"/>
          <text class="title">开始考试</text>
        </view>
      </view>
    </view>
    <view class="result-row">
      <view class="item f1">
        <text class="value">{{ total }}</text>
        <text class="label">考试次数</text>
      </view>
      <view class="divider"></view>
      <view class="item f1">
        <text class="value">{{ success }}</text>
        <text class="label">合格次数</text>
      </view>
    </view>
    <template v-if="list && list.length">
      <view class="row header">
        <view class="item f1">考试</view>
        <view class="item time">日期</view>
        <view class="item">用时</view>
        <view class="item">成绩</view>
      </view>
      <view v-for="item in list" :key="item.id" class="row">
        <view class="item f1">{{ item.title }}</view>
        <view class="item time">{{ dateFormt(item.createdAt) }}</view>
        <view class="item">{{ timeFormat(item.time) }}'</view>
        <view :class="['item',item.status?'success':'fail']">{{ item.score }}</view>
      </view>
    </template>
    <ADIntercept ref="ADIntercept"></ADIntercept>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import navbar from '@/components/navbar'
import day from "@/vendor/day";
import ADIntercept from "@/components/ADIntercept.vue";
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  name: 'exam_result',
  components: {
    TiyanDialog,
    ADIntercept,
    navbar
  },
  data() {
    return {
      list: null,
      kemu: null
    }
  },
  computed: {
    ...mapGetters(['mine', 'isLogined', 'query', 'topBar']),
    total() {
      if (this.list) {
        return this.list.length
      }
      return 0
    },
    success() {
      if (this.list) {
        return this.list.filter(item => item.status).length
      }
      return 0
    }
  },
  onLoad({kemu}) {
    this.kemu = parseInt(kemu)
  },
  async onShow() {
    this.list = await this.kaoshiList(this.kemu)
  },
  methods: {
    ...mapActions('question', ['kaoshiList']),
    timeFormat(time) {
      let minutes = Math.floor((time) / 60) + ''
      if (minutes.length < 2) {
        minutes = '0' + minutes
      }
      let seconds = (time) % 60 + ''
      if (seconds.length < 2) {
        seconds = '0' + seconds
      }
      return minutes + ':' + seconds
    },
    dateFormt(time) {
      return day(time).format('YYYY-MM-DD')
    },
    async toExam() {
      let title
      if (this.kemu === 1) {
        title = '科一模拟考试'
      } else if (this.kemu === 4) {
        title = '科四模拟考试'
      }
      try {
        await this.$refs.ADIntercept.tryOpen()
        uni.navigateTo({
          url: '/pages/detail/detail?type=moni&title=' + title + '&kemu=' + this.kemu
        });
      } catch (e) {
        console.log(e)
      }
    },
    gokaochang() {
      uni.navigateTo({
        url: '/pages/kaochang_moni_enter/kaochang_moni_enter?kemu=' + this.kemu
      })
    }
  }
}
</script>

<style lang='scss'>
page {
  background-color: #fff;
}

.exam_result-container {

  .btn {
    border-radius: 40upx;
    padding: 30rpx 0;
    background-image: linear-gradient(90deg, #538DFF 0%, #3073F6 100%);
    color: #fff;
    margin: 30rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 0;

    &:last-child {
      margin-left: 0;
    }

    &.zhenshi {
      background-image: linear-gradient(to right, rgb(42, 42, 42), rgb(25, 26, 31));

      .left-container {
        .title {
          color: rgb(246, 203, 177);
        }

        .sub-title {
          color: rgba(246, 203, 177, 0.85);
        }
      }

      .inner-btn {
        .img {
          background-image: linear-gradient(to right, rgb(246, 203, 177), rgb(247, 228, 210));
          border-radius: 100rpx;
        }

        .title {
          color: rgb(42, 42, 42);
        }
      }
    }

    .left-container {

      .title {
        font-weight: bold;
        font-size: 18px;
        color: #FFFFFF;
      }

      .sub-title {
        margin-top: 15rpx;
        opacity: 0.85;
        font-size: 14px;
        color: #FFFFFF;
      }
    }

    .inner-btn {
      width: 184upx;
      height: 76upx;
      margin-top: 50rpx;

      .img {
        position: absolute;
        width: 184upx;
        height: 76upx;
        background-image: linear-gradient(to right, rgb(252, 252, 252), rgb(207, 235, 248));
        border-radius: 100rpx;
      }

      .title {
        position: absolute;
        font-weight: bold;
        font-size: 32upx;
        color: #3073F6;
      }
    }
  }

  .result-row {
    display: flex;
    margin: 50upx 0;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .value {
        font-size: 22px;
        color: #252525;
        font-weight: 500;
      }

      .label {
        font-size: 15px;
        color: #000;
        font-weight: 500;
      }
    }

    .divider {
      width: 1px;
      height: 130upx;
      background-color: #e6e6e6;
    }
  }

  .row {
    border-radius: 40upx;
    height: 80upx;
    margin: 0 30upx;
    color: #3b3b3b;
    font-size: 14px;
    display: flex;

    &.header {
      height: 76upx;

      background: #3073F6;
      color: #fff;
    }

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 100rpx;

      &.time {
        flex: 1;
      }

      &.success {
        color: #20D8C0;
      }

      &.fail {
        color: #FB3C3D;
      }
    }
  }
}
</style>
